<template>
    <div>
        <HeaderView></HeaderView>
        <div class="payment-address">
        <a-row justify="center">
        <a-col :xs="4" :sm="4" :md="6" :lg="8" :xl="20">
            <div class="shipping_address"><p>收货地址</p></div>
        </a-col>
        <a-col :xs="4" :sm="4" :md="6" :lg="8" :xl="20">
            <div class="addresses_list">
              <div class="add_head">
                <a-space>
                  <plus-outlined style="font-size:30px;"/><div>添加新地址</div>
                </a-space>
              </div>
              <div class="">收货地址</div>
            </div>
        </a-col>
        <a-col :xs="4" :sm="4" :md="6" :lg="8" :xl="20">
            <div class="shipping_address"><p>收货地址</p></div>
        </a-col>
        <a-col :xs="4" :sm="4" :md="6" :lg="8" :xl="20">
            <div class="shipping_address"><p>收货地址</p></div>
        </a-col>
        </a-row>
        </div>
    </div>
</template>
<script>
import HeaderView from '@/components/HeaderView.vue'
import { PlusOutlined } from '@ant-design/icons-vue'
export default {
  components: {
    HeaderView, PlusOutlined
  }
}
</script>
<style scoped>
.add_head{
  /* position:; */
  width:800px;
  height:100px;
  font-size:20px;
  line-height:120px;
}
.addresses_list{
  background-color:#fff;

}
.payment-address{
  background-color:#fafafa;
}
.shipping_address{
  margin-top:30px;
  height:90px;
  background-color:#fff;
  color:#585555;
  font-size:20px;
  letter-spacing:1px;
  position:relative;
    border-bottom:1px solid rgba(0,0,0,.1);
}
.shipping_address p{
  position:absolute;
  top:50%;
  left:3%;
  transform:translateY(-50%);
}
</style>
